<template>
    <div class="byte-unit-converter-tool">
        <div class="tool-header">
            <h1>字节单位换算器</h1>
            <p>比特、字节、千字节等单位转换工具</p>
        </div>

        <div class="tool-container">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>字节单位换算</span>
                        <el-button type="success" @click="resetData" size="small">重置数据</el-button>
                    </div>
                </template>

                <div class="converter-content">
                    <!-- 提示信息 -->
                    <el-alert type="info" :closable="false" style="margin-bottom: 20px;">
                        <template #default>
                            <span>提示：在对应单位文本框输入初始值，即可转换成其他单位。</span>
                        </template>
                    </el-alert>

                    <!-- 转换输入框 -->
                    <div class="input-fields">
                        <div class="input-field" v-for="unit in units" :key="unit.key">
                            <div class="field-label">
                                <el-icon>
                                    <DocumentCopy />
                                </el-icon>
                                <span>{{ unit.label }}</span>
                                <span class="unit-abbr">({{ unit.abbr }})</span>
                            </div>
                            <el-input-number v-model="values[unit.key]" :precision="6" :step="0.01" :min="0"
                                size="large" :placeholder="`请输入${unit.label}值`" @change="handleInputChange(unit.key)"
                                style="width: 100%;" />
                        </div>
                    </div>
                </div>
            </el-card>

            <!-- 工具介绍 -->
            <el-card style="margin-top: 30px;">
                <template #header>
                    <div class="card-header">
                        <span>工具介绍</span>
                    </div>
                </template>

                <div class="info-content">
                    <p>本工具目前提供常用字节单位转换。</p>
                    <div class="conversion-rules">
                        <h4>转换规则：</h4>
                        <ul>
                            <li>1 字节(B) = 8 比特(bit)</li>
                            <li>1 千字节(KB) = 1024 字节(B) = 2<sup>10</sup> 字节(B)</li>
                            <li>1 兆字节(MB) = 1024 千字节(KB) = 2<sup>20</sup> 字节(B)</li>
                            <li>1 千兆字节(GB) = 1024 兆字节(MB) = 2<sup>30</sup> 字节(B)</li>
                            <li>1 太字节(TB) = 1024 千兆字节(GB) = 2<sup>40</sup> 字节(B)</li>
                        </ul>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { DocumentCopy } from '@element-plus/icons-vue'

// 单位配置
const units = [
    { key: 'bit', label: '比特', abbr: 'bit', baseValue: 1 }, // 以 bit 为基准
    { key: 'B', label: '字节', abbr: 'B', baseValue: 8 },
    { key: 'KB', label: '千字节', abbr: 'KB', baseValue: 8 * 1024 },
    { key: 'MB', label: '兆字节', abbr: 'MB', baseValue: 8 * 1024 * 1024 },
    { key: 'GB', label: '千兆字节', abbr: 'GB', baseValue: 8 * 1024 * 1024 * 1024 },
    { key: 'TB', label: '太字节', abbr: 'TB', baseValue: 8 * 1024 * 1024 * 1024 * 1024 }
]

// 存储各单位的数值
const values = ref({
    bit: null,
    B: null,
    KB: null,
    MB: null,
    GB: null,
    TB: null
})

// 当前正在输入的字段（防止循环更新）
let currentInputField = null

// 处理输入变化
const handleInputChange = (fieldKey) => {
    // 如果当前字段没有值，清除所有字段
    if (values.value[fieldKey] === null || values.value[fieldKey] === undefined || values.value[fieldKey] === '') {
        if (currentInputField === fieldKey) {
            resetData()
        }
        return
    }

    // 防止循环更新
    if (currentInputField === fieldKey) {
        return
    }

    currentInputField = fieldKey

    // 获取当前字段的值和基准值
    const inputValue = parseFloat(values.value[fieldKey])
    if (isNaN(inputValue) || inputValue < 0) {
        currentInputField = null
        return
    }

    // 找到当前字段的单位配置
    const currentUnit = units.find(u => u.key === fieldKey)
    if (!currentUnit) {
        currentInputField = null
        return
    }

    // 转换为比特（基准单位）
    const bitValue = inputValue * currentUnit.baseValue

    // 转换所有其他单位
    units.forEach(unit => {
        if (unit.key !== fieldKey) {
            values.value[unit.key] = parseFloat((bitValue / unit.baseValue).toFixed(6))
        }
    })

    // 重置当前输入字段标记
    setTimeout(() => {
        currentInputField = null
    }, 100)
}

// 重置数据
const resetData = () => {
    values.value = {
        bit: null,
        B: null,
        KB: null,
        MB: null,
        GB: null,
        TB: null
    }
    currentInputField = null
    ElMessage.success('已重置所有数据')
}
</script>

<style scoped>
.byte-unit-converter-tool {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.tool-header {
    text-align: center;
    margin-bottom: 40px;
}

.tool-header h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 10px;
}

.tool-header p {
    color: #666;
    font-size: 1.1rem;
}

.tool-container {
    margin-bottom: 40px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: #333;
}

.converter-content {
    padding: 10px;
}

.input-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.input-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #333;
    font-size: 1rem;
}

.unit-abbr {
    color: #909399;
    font-size: 0.9rem;
    font-weight: normal;
}

.info-content {
    color: #666;
    line-height: 1.8;
}

.info-content p {
    margin-bottom: 15px;
}

.conversion-rules {
    margin-top: 20px;
}

.conversion-rules h4 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.conversion-rules ul {
    padding-left: 25px;
    margin: 0;
}

.conversion-rules li {
    margin-bottom: 8px;
    line-height: 1.8;
}

.conversion-rules sup {
    font-size: 0.8em;
    vertical-align: super;
}

@media (max-width: 768px) {
    .tool-header h1 {
        font-size: 2rem;
    }

    .input-fields {
        grid-template-columns: 1fr;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
</style>
